<template>
  <div v-loading="loading" element-loading-text="拼命加载中..."
       >
    <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>申请用户管理</el-breadcrumb-item>
    </el-breadcrumb>

    <el-divider></el-divider>
    &nbsp;&nbsp;&nbsp;
    <span class="toubuwenzi">账号:</span>&nbsp;&nbsp;
    <el-input style="width: 19%;height: 32px" v-model="haha.username" placeholder="请输入账号模糊查询"></el-input> &nbsp;&nbsp;
    <span class="toubuwenzi">性别:</span>&nbsp;&nbsp;
    <el-select style="height: 32px; width: 19%;" v-model="haha.gender" placeholder="请选择性别">
      <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
      </el-option>
    </el-select>&nbsp;&nbsp;
    <span class="toubuwenzi">真实姓名:</span>&nbsp;&nbsp;
    <el-input style="width: 19%;height: 32px" v-model="haha.realName" placeholder="请输入真实姓名"></el-input>&nbsp;&nbsp;
    <span class="toubuwenzi">手机号码:</span>&nbsp;&nbsp;
    <el-input style="width: 19%;height: 32px" v-model="haha.phone" placeholder="请输入手机号码"></el-input>
    <div id="toubu1">
      <span class="toubuwenzi1">用户状态:</span>
      <el-select style="height: 32px; width: 19%;" v-model="haha.state" placeholder="请选择状态">
        <el-option
            v-for="i in dongjie"
            :key="i.values"
            :label="i.label"
            :value="i.values">
        </el-option>
      </el-select>
      <el-row id="cha">
        <el-button type="primary" icon="el-icon-search" @click="selectUserName()">查询</el-button>
        <el-button type="primary" icon="el-icon-refresh" @click="reset()">重置</el-button>
        <!--        <el-button type="text" icon="el-icon-arrow-up">收起</el-button>-->
      </el-row>

      <el-row id="chaa">
        <div style="display: flex">
          <div style=" padding-right: 20px">
            <el-button type="primary" icon="el-icon-delete" @click="listStateId()">回收站</el-button>

            <el-dialog title="回收站" :visible.sync="dialogTableVisible">
              <el-table :data="userArr1">
                <el-table-column property="username" width="150"></el-table-column>
                <el-table-column property="unit" width="200"></el-table-column>
                <el-table-column property="regionName" width="150"></el-table-column>
                <el-table-column>
                  <template slot-scope="scope">
                    <el-button
                        size="mini"
                        @click="handleEdit(scope.row)">恢复用户
                    </el-button>
                    <el-button
                        size="mini"
                        type="danger"
                        @click="userDeleteConfirm(scope.row)">彻底删除
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-dialog>

          </div>
          <div>
            <div style=" padding-right: 20px">
            <el-button type="primary" icon="el-icon-s-check" @click="UserCheckPending()">待审核</el-button>
            <el-dialog title="待审核" :visible.sync="CheckPending">
              <el-table :data="CheckPendings">
                <el-table-column property="username" width="150"></el-table-column>
                <el-table-column property="email" width="200"></el-table-column>
                <el-table-column property="regionName" width="150"></el-table-column>
                <el-table-column>
                  <template slot-scope="scope">
                    <el-button
                        size="mini"
                        type="warning"
                        @click="handleEdits(scope.row)">驳回
                    </el-button>
                    <el-button
                        size="mini"
                        type="primary"
                        @click="userUpdateConfirm(scope.row)">通过
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-dialog>
              <el-dialog title="回驳意见" :visible.sync="fail">
                  <div>
                      <el-input  type="textarea"
                                 :rows="4" v-model="message.rejectMessage" autocomplete="off" placeholder="请输入回驳意见">
                      </el-input>
                  </div>
                <div slot="footer" class="dialog-footer">
                  <el-button type="primary" @click="rejected()">确 定</el-button>
                  <el-button @click="fail = false">关 闭</el-button>
                </div>
              </el-dialog>
          </div>
            </div>
          <!--导出-->
          <div>
            <download-excel
                class="export-excel-wrapper"
                :data="userArri"
                :fields="json_fields"
                type="xls"
                worksheet="My Worksheet"
                name="用户信息"
            >
              <el-button type="primary" icon="el-icon-download" @click="query()">导出</el-button>
            </download-excel>
          </div>
        </div>

      </el-row>
    </div>

    <div
        style=":border:1px solid #409eff;background-color: rgba(64,158,255,0.1);margin:20px 10px;padding:12px 30px;color:#606266;border-radius: 5px;">
      已选择<a style="text-decoration: none;color:#409eff" href="javascript:void(0)">{{ n }}</a>项
      <span style=" font-size: 15px; margin-left: 30px">
                    <a style="text-decoration: none;color:#409eff" href="javascript:void(0)" @click="clear()">清空</a>
            </span>
    </div>

    <template>
      <el-table
          ref="multipleTable"
          :data="userArr"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="Addnumbers"
      >

        <el-table-column
            type="selection"
            width="80">
        </el-table-column>
        <el-table-column
            prop="username"
            label="用户账号"
            width="200">
        </el-table-column>
        <el-table-column
            prop="realName"
            label="真实姓名"
            width="200">
        </el-table-column>
        <el-table-column
            prop="unit"
            label="单位名称"
            width="200"
        >
        </el-table-column>
        <el-table-column
            prop="regionName"
            label="所属地区"
            width="200"
            show-overflow-tooltip>
        </el-table-column>
        <el-table-column
            prop="avatar"
            label="头像"
            width="100">
          <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
        </el-table-column>
        <el-table-column
            prop="phone"
            label="手机号" width="150"
            show-overflow-tooltip>
        </el-table-column>
        <el-table-column
            prop="state"
            label="状态"
            show-overflow-tooltip>
        </el-table-column>

        <el-table-column
            fixed="right"
            label="操作"
            width="120">
          <template slot-scope="scope">
            <el-dropdown>
  <span class="el-dropdown-link">
    更多<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>
                  <el-button type="text" @click="particular(scope.row)">详情</el-button>
                </el-dropdown-item>


                <el-dropdown-item>
                  <el-button type="text" @click="selectUserpassword(scope.row)">密码</el-button>
                </el-dropdown-item>


                <el-dropdown-item>
                  <el-button type="text" @click="openDeleteConfirm(scope.row)">删除</el-button>
                </el-dropdown-item>


                <el-dropdown-item v-if="scope.row.state == '冻结'">
                  <el-button type="text" @click="updateStatus(scope.row)">正常</el-button>
                </el-dropdown-item>

                <el-dropdown-item v-if="scope.row.state == '正常'">
                  <el-button type="text" @click="updateStatus(scope.row)">冻结</el-button>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>

          </template>

        </el-table-column>
      </el-table>
      <div>
        <el-dialog title="详情" :visible.sync="particulars">
          <hr>
          <el-form :model="selectUserParticulars">

            <el-form-item style="margin-top: 20px" label="用户账号:" :label-width="formLabelWidth">
              <el-input style="width: 85%;height: 32px;" v-model="selectUserParticulars.username"
                        :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="单位名称:" :label-width="formLabelWidth">
              <el-input style="width: 85%;height: 32px;" v-model="selectUserParticulars.unit"></el-input>
            </el-form-item>
            <el-form-item label="地区名称:" :label-width="formLabelWidth">
<!--              <el-input style="width: 85%;height: 32px;" v-model="selectUserParticulars.name"></el-input>-->
              <el-select style="height: 32px; width: 85%;" placeholder="请选择地区" v-model="selectUserParticulars.UserName">
                <el-option
                    v-for="item in userListOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="角色选择:" :label-width="formLabelWidth">
              <el-select style="height: 32px; width: 85%;" placeholder="请选择角色" v-model="selectUserParticulars.roleId">
                <el-option
                    v-for="item in RoleListOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="手机号码:" :label-width="formLabelWidth">
              <el-input style="width: 85%;height: 32px;" v-model="selectUserParticulars.phone"></el-input>
            </el-form-item>
            <el-form-item label="角色分配:" :label-width="formLabelWidth">
              <el-input
                  style="width: 85%;height: 32px"
                  placeholder="请输入内容"
                  v-model="selectUserParticulars.roleName"
                  :disabled="true">
              </el-input>
            </el-form-item>

          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="particulars=false">关 闭</el-button>
            <el-button type="primary" @click="updatesUserRole()">确 定</el-button>
          </div>
        </el-dialog>

        <el-dialog title="重新设定密码" :visible.sync="dialogFormVisible">
          <hr>
          <el-form :model="form">
            <div style="margin-bottom: 150px">
              <el-form-item style="margin-top: 20px" label="用户账号:" :label-width="formLabelWidth">
                <el-input v-model="form.username" autocomplete="off" :disabled="true"></el-input>
              </el-form-item>
              <el-form-item label="登录密码:" :label-width="formLabelWidth">
                <el-input type="password" v-model="password" autocomplete="off" placeholder="请输入登录密码"></el-input>
              </el-form-item>
              <el-form-item label="确认密码:" :label-width="formLabelWidth">
                <el-input type="password" v-model="form.password" autocomplete="off" placeholder="请重新输入登录密码"></el-input>
              </el-form-item>
            </div>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">关 闭</el-button>
            <el-button type="primary" @click="updatesPassword()">确 定</el-button>
          </div>
        </el-dialog>

        <div style="margin-top: 20px">
          <el-pagination
              style="margin-top: 12px;text-align: right;"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pageTotal">
          </el-pagination>
        </div>

      </div>
    </template>
  </div>
</template>
<script>
export default {
  data() {
    return {
      fail: false,
      CheckPending: false,
      role: {},
      userListOptions:[],
      RoleListOptions: [],
      dialogTableVisible: false,
      title: "体育局用户表格",
      json_fields: {
        "ID": 'id',
        "用户账号": 'username',
        "单位名称": 'unit',
        "所属地区": 'regionName',
        "手机号": 'phone',
        "状态": 'state',
      },
      n: 0,
      particulars: false,
      table: false,
      userArr: [],
      userArr1: [],
      form: {},
      password: '',
      formLabelWidth: '120px',
      dialogFormVisible: false,
      haha: [],
      input: '',
      options: [{
        value: '男',
        label: '男'
      }, {
        value: '女',
        label: '女'
      }],
      value: '',
      dongjie: [{
        values: '正常',
        label: '正常'
      }, {
        values: '冻结',
        label: '冻结'
      }],
      multipleSelection: [],
      selectUserParticulars: [],
      loading: true,
      CheckPendings: [],
      message:{
        email:"",
        rejectMessage:""
      },
      userArri:[],
      // 总的数据
      tableData: [],
      // 总数据量 默认为 0
      pageTotal: 0,
      // 当前页 默认是第一页
      currentPage: 1,
      // 每页大小 默认每页10条数据
      pageSize: 10,
    }
  },
  // created () {
  //   this.fetchData()
  // },
  methods: {
// 改变每页大小的回调
    handleSizeChange (val) {
      this.pageSize = val
      this.userArr = this.queryByPage()
    },
    // 改变当前页的回调
    handleCurrentChange (val) {
      this.currentPage = val
      this.userArr = this.queryByPage()
    },
    // 实现分页的方法
    queryByPage () {
      // 起始位置 = (当前页 - 1) x 每页的大小
      const start = (this.currentPage - 1) * this.pageSize
      // 结束位置 = 当前页 x 每页的大小
      const end = this.currentPage * this.pageSize
      return this.tableData.slice(start, end)
    },

    // 发邮件
    rejected(){
      this.message.email =this.email
      this.message.projectId =this.id
      let message = this.qs.stringify(this.message)
      let url='http://localhost:8080/reportingusers/rejected';
      console.log(message,url)
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .post(url,message).then((response)=> {
         this.UserCheckPending();
      })
      this.$message.success("回驳成功")
      this.fail = false
    },
    //驳回
    handleEdits(user){
      this.message.rejectMessage=''
      this.fail= true
      this.email=user.email
      this.id=user.id
    },
    //审核通过
    userUpdateConfirm(user){
      console.log('准备审核用户……id=' + user.id);
      let url = 'http://localhost:8080/reportingusers/' + user.id + '/userUpdate';
      console.log('url=' + url)
      this.axios.create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .post(url).then((response) => {
        let responseBody = response.data;
        if (responseBody.state != 20000) {
          this.$notify.error({
            title: '审核失败！',
            message: responseBody.message
          });
        }
        if (responseBody.state == 20000) {
          this.$notify({
            title: '成功',
            message: '用户审核成功！',
            type: 'success'
          });
        }
        this.UserCheckPending();
        this.loadReportingUserList();
      });
    },
    query(){
      this.selectUserName();
      // this.loadReportingUserList();
    },
    //待审核
    UserCheckPending(){
      this.CheckPending=true;
      console.log('mounted')
      console.log('loadreportingusersList');
      let url = 'http://localhost:8080/reportingusers/CheckPending';
      console.log('url = ' + url);
      this.axios.create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response) => {
        let responseBody = response.data;
        this.CheckPendings = responseBody.data;
      })
    },
    //状态
    updateStatus(states) {

      let url = 'http://localhost:8080/reportingusers/updateStatus';
      let formData = this.qs.stringify(states);
      this.axios.create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .post(url, formData).then((response) => {
        let responseBody = response.data;
        if (responseBody.state == 20000) {
          this.$message({
            message: "修改状态成功！",
            type: "success"
          });
          this.loadReportingUserList();
        } else if (responseBody.state == 40900) {
          this.$message.error(responseBody.message);
        } else {
          this.$message.error(responseBody.message);
        }
      });
    },
    //彻底删除用户
    handleDelete(user) {
      console.log('准备删除用户……id=' + user.id);
      let url = 'http://localhost:8080/reportingusers/' + user.id + '/delete';
      console.log('url=' + url)
      this.axios.create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .post(url).then((response) => {
        let responseBody = response.data;
        if (responseBody.state != 20000) {
          this.$notify.error({
            title: '删除失败！',
            message: responseBody.message
          });
        }
        if (responseBody.state == 20000 || responseBody.state == 40400) {
          this.$notify({
            title: '成功',
            message: '删除成功',
            type: 'success'
          });
          this.listStateId();
        }
      });
    },
    userDeleteConfirm(user) {
      let message = '此操作将永久删除【' + user.username + '】用户，是否继续？';
      this.$confirm(message, '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.handleDelete(user);
      }).catch(() => {
      });
    },
    //列表删除用户
    openDeleteConfirm(state) {
      let message = '您确定要删除【' + state.username + '】用户吗？';
      this.$confirm(message, '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteStateId(state);
      }).catch(() => {
      });
    },
    deleteStateId(state) {
      let url = 'http://localhost:8080/reportingusers/updateStateId/' + state.id;
      this.axios.create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .post(url).then((response) => {
        let responseBody = response.data;
        if (responseBody.state == 20000) {
          this.$notify({
            title: '成功',
            message: "删除用户成功，可在回收站恢复此用户！",
            type: 'success'
          });
          this.loadReportingUserList();
        }
      })
    },
    //恢复用户
    handleEdit(state) {
      let url = 'http://localhost:8080/reportingusers/updateStateIda/' + state.id;
      this.axios.create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .post(url).then((response) => {
        let responseBody = response.data;
        if (responseBody.state == 20000) {
          this.$notify({
            title: '成功',
            message: "用户恢复成功！",
            type: 'success'
          });
          this.listStateId();
          this.loadReportingUserList();
        }
      })
    },
    //修改用户信息以及角色
    updatesUserRole() {
      let url = 'http://localhost:8080/reportingusers/' + this.selectUserParticulars.id + '/update';
      let formData = this.qs.stringify(this.selectUserParticulars);
      this.axios.create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .post(url, formData).then((response) => {
        let responseBody = response.data;
        if (responseBody.state == 20000) {
          this.$message({
            message: '修改用户详情成功',
            type: "success"
          });
          this.particulars = false;
          this.loadReportingUserList();
        } else if (responseBody.state == 40900) {
          this.$message.error(responseBody.message);
        } else {
          this.$message.error(responseBody.message);
          this.particulars = false;
          this.loadReportingUserList();
        }
      });
    },
    //修改密码
    updatesPassword() {
      let IsP = /^[a-zA-Z0-9_-].{8,16}$/;
      if (!IsP.test(this.password)) {
        /*4到16位(字母,数字,下划线,减号)*/
        this.$notify.error({
          title: '提示',
          message: '请输入合法的密码！'
        });
        return;
      }
      if (!IsP.test(this.form.password)) {
        /*4到16位(字母,数字,下划线,减号)*/
        this.$notify.error({
          title: '提示',
          message: '请输入合法的密码！'
        });
        return;
      }
      let url = 'http://localhost:8080/reportingusers/updatePassword';
      let forms = this.qs.stringify(this.form)
      if (this.form.password == this.password) {
        this.axios.create({'headers': {'Authorization': localStorage.getItem('jwt')}})
            .post(url, forms).then((response) => {
          let responseBody = response.data;
          if (responseBody.state == 20000) {
            this.$notify({
              title: '成功',
              message: "修改密码成功！",
              type: 'success'
            });
            this.dialogFormVisible = false;
            this.password = '';
            this.form.password = '';
            return;
          } else {
            this.$notify.error({
              title: '失败',
              message: '修改密码失败！'
            });
          }
        })
      } else {
        this.$notify.error({
          title: '提示',
          message: '密码不一致，请重新输入'
        });
      }
    },
    //密码账号查询
    selectUserpassword(row) {
      this.dialogFormVisible = true;
      this.form.username = row.username;
    },
    //已选择项
    Addnumbers(selections) {
      this.n = selections.length
    },
    //清空
    clear() {
      this.$refs.multipleTable.clearSelection();
    },
    //重置
    reset() {
      this.haha = [];
    },
    //模糊查询
    selectUserName() {
      let url = 'http://localhost:8080/reportingusers/likeSelectUser';
      let haha = this.qs.stringify(this.haha);
      this.axios.create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .post(url, haha).then((response) => {
        let responseBody = response.data;
        for (let i = 0; i < responseBody.data.length; i++) {

          if (responseBody.data[i].state == 1) {
            responseBody.data[i].state = '正常';

          } else if (responseBody.data[i].state == 2) {
            responseBody.data[i].state = '冻结';

          } else if (responseBody.data[i].state == 3) {
            responseBody.data.splice(i, 1);

          }

        }
        // if (responseBody.state == 20000) {
        //           this.$message({
        //             message: "模糊查询成功",
        //             type: 'success'
        //           });
        // this.loading = false;
        this.userArr = response.data.data;
        this.userArri = response.data.data;
        // this.haha = [];

        // }
      })
    },
    userListOptionss(){
      console.log('loadRoleList');
      let url = 'http://localhost:8080/reportingusers/userListOptions';
      console.log('url = ' + url);
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response) => {
        let responseBody = response.data;
        this.userListOptions = responseBody.data;
      });
    },
    //查询角色列表
    loadRoleList() {
      console.log('loadRoleList');
      let url = 'http://localhost:8080/roles';
      console.log('url = ' + url);
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response) => {
        let responseBody = response.data;
        this.RoleListOptions = responseBody.data;
      });
    },
    // 详情列表展示查询
    particular(userParticular) {
      this.particulars = true
      let url = 'http://localhost:8080/reportingusers/selectUserParticulars/' + userParticular.id;
      this.axios.create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .post(url).then((response) => {
        this.selectUserParticulars = response.data.data;
      })
    },
    // 列表查询
    loadReportingUserList() {
      console.log('mounted')
      console.log('loadreportingusersList');
      let url = 'http://localhost:8080/reportingusers';
      console.log('url = ' + url);
      this.axios.create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response) => {
        let responseBody = response.data;
        for (let i = 0; i < responseBody.data.length; i++) {

          if (responseBody.data[i].state == 1) {
            responseBody.data[i].state = '正常';

          } else if (responseBody.data[i].state == 2) {
            responseBody.data[i].state = '冻结';

          } else if (responseBody.data[i].state == 3) {
            responseBody.data.splice(i, 1);
          }
        }
        this.tableData = responseBody.data
        this.pageTotal = responseBody.data.length
        this.userArri = responseBody.data
        this.userArr = this.queryByPage();
        this.loading = false;
      })
    },
    listStateId() {
      this.dialogTableVisible = true
      console.log('mounted')
      console.log('loadreportingusersList');
      let url = 'http://localhost:8080/reportingusers/listStateId';
      console.log('url = ' + url);
      this.axios.create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response) => {
        let responseBody = response.data;
        this.userArr1 = responseBody.data;
      })
    }

  },
  mounted() { //挂载
    console.log('mounted')
    this.loadReportingUserList();
    this.loadRoleList();
    this.userListOptionss();
  }
}
</script>


<style>
.toubuwenzi {
  /*padding-left: 16px;*/
}

#toubu1 {
  padding-top: 35px;
  margin-right: 10px;
  /*padding-left: 20px;*/
  /*display: inline-block;*/
}

#cha {
  float: right;
  left: -823px;
}

#chaa {
  /*float: left;*/
  margin-top: 35px;
  /*padding-bottom: 100px;*/
}

.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}

.el-icon-arrow-down {
  font-size: 12px;
}

#chouti {
  width: 800px;
  padding-top: 110px;
  position: absolute;
  margin-top: 50px;
  left: 50%;
  top: 15%;
  transform: translate(-50%, -50%);
}
</style>